<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生表CRUD</title>
    <!--    注意idea的提示不一定正确,慎重-->
    <!--    根路径为static-->
    <link rel="stylesheet" href="/bootstrap/bootstrap.css">
    <script src="/bootstrap/jquery.js"></script>
    <script src="/bootstrap/bootstrap.bundle.js"></script>
    <script src="/bootstrap/bootstrap.min.js"></script>

</head>
<body>




<div class="container">
    <div class="row">
        <table class="table">
            <div class="input-group mb-3 col-md-4 mt-3">
                <input id="name" type="text" class="form-control" placeholder="输入姓名进行检索"
                       aria-label="Example text with button addon" aria-describedby="button-addon1">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-secondary" type="button" id="search-username">确定</button>
                </div>
            </div>
<!--            开启模态框-->
            <button type="button" class="btn btn-secondary  col-md-2 m-3" data-toggle="modal" data-target="#addStudentModal">
                新增学生
            </button>
            <thead class="thead-dark">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">姓名</th>
                <th scope="col">性别</th>
                <th scope="col">成绩</th>
                <th scope="col" colspan="2">操作</th>
            </tr>
            </thead>
            <tbody id="studentTb">
            </tbody>
        </table>
    </div>

</div>

<!--新增学生的模态框-->
<div class="modal fade" id="addStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新增学生信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formInsertStudent">
                    <div class="form-group">
                        <label for="add-name">姓名</label>
                        <input type="text" class="form-control" id="add-name" placeholder="输入姓名" name="name">
                    </div>
                    <div class="form-group">
                        <label for="add-no">学号</label>
                        <input type="text" class="form-control" id="add-no" placeholder="输入学号" name="no">
                    </div>
                    <div class="form-group">
                        <label for="add-password">密码</label>
                        <input type="password" class="form-control" id="add-password" placeholder="输入密码" name="password">
                    </div>
                    <div class="form-group">
                        <label for="add-age">年龄</label>
                        <input type="text" class="form-control" id="add-age" placeholder="输入年龄" name="age">
                    </div>
                    <div class="form-group">
                        <label for="add-age">分数</label>
                        <input type="text" class="form-control" id="add-score" placeholder="输入分数" name="score">
                    </div>
                    <div class="form-group">
                        <label for="add-sex">性别</label>
                        <select class="form-control" id="add-sex" name="sex">
                            <option value="1" name="sex">男</option>
                            <option value="2" name="sex">女</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="insertStudent()">确定</button>
            </div>
        </div>
    </div>
</div>

<!--修改学生信息的模态框-->
<div class="modal fade" id="updateStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改学生信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formUpdateStudent">
                    <input type="text" hidden="hidden" id="update-id" name="id">
                    <div class="form-group">
                        <label for="add-name">姓名</label>
                        <input type="text" class="form-control" id="update-name" placeholder="输入姓名" name="name">
                    </div>
                    <div class="form-group">
                        <label for="add-no">学号</label>
                        <input type="text" class="form-control" id="update-no" placeholder="输入学号" name="no">
                    </div>
                    <div class="form-group">
                        <label for="add-password">密码</label>
                        <input type="password" class="form-control" id="update-password" placeholder="输入密码" name="password">
                    </div>
                    <div class="form-group">
                        <label for="add-age">年龄</label>
                        <input type="text" class="form-control" id="update-age" placeholder="输入年龄" name="age">
                    </div>
                    <div class="form-group">
                        <label for="add-age">分数</label>
                        <input type="text" class="form-control" id="update-score" placeholder="输入分数" name="score">
                    </div>
                    <div class="form-group">
                        <label for="add-sex">性别</label>
                        <select class="form-control" id="update-sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateConfirm">确认修改</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    /**
     * 初始化数据
     */
    function loadData() {
        $.ajax({
            url: '/api/student',
            success: (rs) => {
                let len = rs.length;
                let html = ""
                for (let i = 0; i < len; i++) {
                    let item = rs[i]
                    let sex = item.sex;
                    if (sex === 1) {
                        sex = "男";
                    } else {
                        sex = "女";
                    }
                    html += "<tr>" +
                        "<td>" + item.id + "</td>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + sex + "</td>" +
                        "<td>" + item.score + "</td>" +
                        "<th><a onClick=updateStudent("+item.id+")>"+"修改"+"</a></th>"+
                        "<th><a onClick=deleteStudent("+item.id+")>"+"删除"+"</a></th>"+
                        "<tr>";
                }
                $("#studentTb").html(html);
            }
        })


    }
    loadData()
    /**
     * 通过用户名查询数据
     */
    $("#search-username").click(() => {
        // console.log("点击")
        let name = $("#name").val();
        if (name === "") {
            return;
        }
        // console.log(name)
        // 发送ajax请求
        $.ajax({
            url: "/api/student/" + name,
            success: (rs) => {
                $("#studentTb").children().remove()
                console.log($("#studentTb"))
                let len = rs.length;
                let html = ""
                for (let i = 0; i < len; i++) {
                    let item = rs[i]
                    let sex = item.sex;
                    if (sex === 1) {
                        sex = "男";
                    } else {
                        sex = "女";
                    }
                    html += "<tr>" +
                        "<td>" + item.id + "</td>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + sex + "</td>" +
                        "<td>" + item.score + "</td>" +
                        "<th><a onClick=updateStudent("+item.id+")>"+"修改"+"</a></th>"+
                        "<th><a onClick=deleteStudent("+item.id+")>"+"删除"+"</a></th>"+
                        "<tr>";
                }
                $("#studentTb").html(html);
                console.log(rs)
            }
        })

    })

    insertStudent = ()=>{
        let formData = $("#formInsertStudent").serialize()
        $.ajax({
            url:"/api/student",
            method : "POST",
            data : formData,
            success : (rs)=>{
                // 取消模态框
                $("#addStudentModal").modal("hide")
                // 重新加载数据
                loadData()
            }
        })
    }
    /**
     * 修改用户信息
     * 参数为id
     */
    updateStudent = (id)=>{
        // 打开模态框
        $("#updateStudentModal").modal("show")
        //按照id获取数据
        console.log(id)
        $.ajax({
            url:"/api/student/id/"+id,
            method : "GET",
            success:(rs)=>{
                // 设置模态框的数据
                $("#update-id").val(rs.id)
                $("#update-name").val(rs.name)
                $("#update-no").val(rs.no)
                $("#update-password").val(rs.password)
                $("#update-sex").val(rs.sex)
                $("#update-age").val(rs.age)
                $("#update-score").val(rs.score)
            }
        })

    }
    /**
     * modal中确认修改学生信息
     */
    $("#updateConfirm").click(()=>{
        // 获取序列化信息
        let data = $("#formUpdateStudent").serialize()
        //传给后端修改
        $.ajax({
            url:"/api/student",
            method:"PUT",
            data : data,
            success : ()=>{
                //刷新界面
                loadData()
                //关闭模态框
                $("#updateStudentModal").modal("hide")
            }
        })



    })
    /**
     * 删除学生
     * 参数为id
     */
    deleteStudent = (id)=>{
        if(confirm("确认删除?")){
            $.ajax({
                url:"/api/student",
                method : "DELETE",
                data : {"id":id},
                success : (rs)=>{
                    // 重新加载数据
                    loadData()
                }
            })
        }


    }
</script>
</body>
</html>